<template>
  <div class="progress-circle">
		<div class="progress-circle">
			<svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
				<!-- 内层的圆 -->
				<circle class="progress-background" r="50" cx="50" cy="50" fill="transparent"/>
				<!-- 外层的圆  stroke-dasharray 喵边距
				stroke-dashoffset 314 偏移距离-->
				<circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" 
				 :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset"/>
			</svg>
			<slot></slot>
		</div>
  </div>
</template>

<script>
export default {
  name: 'progress-circle',
	props: {
		radius: {//圆圈大小
			type: Number,
			default: 100
		},
		percent: { //偏移距离
			type: Number,
			default: 0
		}
	},
	data() {
		return { //小圆的周长
			dashArray: Math.PI * 100
		}
	},
	computed: {//小球的偏移距离
		dashOffset() { //外边距的进度条
			return (1 - this.percent) * this.dashArray
		}
	}
}
</script>

<style lang="scss" scoped >
		.progress-circle{
			position: relative;
			circle{
				stroke-width:8px;//瞄边的宽度
				transform-origin:center;
				&.progress-background{
					transform:scale(.9);
					stroke:$color-theme-d;
				}
				&.progress-bar{
					transform: scale(.9) rotate(-90deg);
					stroke:$color-theme;
				}
			}
		}
</style>